import {useCallback, useEffect, useMemo, useState} from 'react'
import './index.scss'
import InfiniteScroll from "../../components/infiniteScoll";
import Modal from "../../components/modal";
import useCountdown from "../../hooks/useCountdown";

const SLICE = 6
const data = Array(40).fill({})

function PK() {
  const [showMore, setShowMore] = useState(true)
  const [sliceIndex, setSliceIndex] = useState(SLICE)

  const toLiveRoom = useCallback(() => {
    console.log('toLiveRoom 11')
  }, [])
  const lookMe = () => {
    console.log('look me')
  }



  const renderItem = useCallback((d, i) => {
    return (
      <div className="list-item" key={d}>
        <div className="list-bg">
          <div className="avatar avatar-left online" onClick={toLiveRoom}>
            <img src={`//randomuser.me/api/portraits/women/${Math.floor(Math.random() * 100)}.jpg`} alt=""/>
            <div className="tooltip">
              <p>+400k Point Peringkat</p>
              <p>+40k Bonus Crystal</p>
            </div>
          </div>

          <div className="avatar avatar-right online" onClick={toLiveRoom}>
            <img src={`//randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`} alt=""/>
            <div className="tooltip">
              <p>+400k Point Peringkat</p>
              <p>+40k Bonus Crystal</p>
            </div>
          </div>
        </div>

        <div className="progress">
          <div className="progress-left" style={{width: '40%'}}/>
          <div className="progress-right" style={{width: '60%'}}/>
          <div className="diamond diamond-left">205220</div>
          <div className="diamond diamond-right">252522</div>
        </div>
      </div>
    )
  }, [])
  const renderHostItem = useCallback((d, i) => {
    return (
      <div className="list-item" key={d}>
        <div className="list-content hasTooltip">
          <div className={`rank rank-${i}`}>
            {i > 2 ? (i + 1) : ''}
          </div>
          <div className="avatar online" onClick={toLiveRoom}>
            <img src={`//randomuser.me/api/portraits/women/${Math.floor(Math.random() * 100)}.jpg`} alt=""/>
          </div>

          <div className="user-info">
            <p className="name">host name</p>
            <p className="diamond">22220000</p>
          </div>

          <div className="look-btn">
            <button onClick={lookMe} disabled={false}>Ikuti</button>
          </div>
        </div>

        <div className="tooltip">
         <div>bonus poin: 9999</div>
         <div>bonus crystal: 9999</div>
        </div>
      </div>
    )
  }, [])

  const loadData = () => {
    setTimeout(() => {
      setSliceIndex(d => d + SLICE)
    }, 1000)
  }

  useEffect(() => {
    setShowMore(sliceIndex < data.length)
  }, [sliceIndex, data.length])

  return (
    <div className="test">
      <PKEntry />
      <br/>
      <HostEntry />
      <div className="host-list host-top">
        <h3 className="title">Top 1 Last Day</h3>
        {renderHostItem({}, 0)}
      </div>
      <div className="host-list host-top">
        <h3 className="title">Top 1 Today</h3>
      </div>
      <InfiniteScroll
        className="host-list"
        data={data.slice(0, sliceIndex)}
        renderItem={renderHostItem}
        itemClassName={"item item-rank"}
        loadData={loadData}
        more={showMore}
        renderLoading={() => <div/>}
      />
      <InfiniteScroll
        className="pk-list"
        data={data.slice(0, sliceIndex)}
        renderItem={renderItem}
        itemClassName={"item item-rank"}
        loadData={loadData}
        more={showMore}
        renderLoading={() => <div/>}
      />
      <PKModal />
    </div>
  )
}

function PKModal() {
  const [visible, setVisible] = useState(true)
  const [isConnecting, setIsConnecting] = useState(false)
  const [notMatch, setNotMatch] = useState(true)
  const [targetDate, setTargetDate] = useState(Date.now())

  const [timestamp, {seconds}] = useCountdown({targetDate})

  const startPK = useCallback(() => {
    if(notMatch) {
      setNotMatch(false)
      setIsConnecting(true)
      setTargetDate(Date.now() + 10 * 1000)
    }
  }, [])

  return (
    <Modal
      transparent
      bottom
      closable={false}
      className="pk-modal"
      visible={visible}
      onClose={() => setVisible(false)}>
      <div className="pk-modal-content">
        <div className="avatar avatar-left">
          <img src={`//randomuser.me/api/portraits/women/${Math.floor(Math.random() * 100)}.jpg`} alt=""/>
          <p className="name">pk name</p>
        </div>

        <div className="avatar avatar-right">
          <img src={
            notMatch ? '//activity.icocofun.com/live/uploads/412dd036-36fc-867e-b5ae-a72c40ad886f.png' : (
              isConnecting ? '//activity.icocofun.com/live/uploads/39763c7b-3bd3-a781-f554-38865403cb8d.png' :
                `//randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`
            )
          } alt=""/>
          <p className="name">
            matching...
          </p>
        </div>

        <button className="pk-btn" onClick={startPK}>
          {notMatch ? 'matching...' : 'Hange up'}
        </button>

        {isConnecting && timestamp > 0 && <p className="timeDown">{seconds}s</p>}
      </div>
    </Modal>
  )
}

function PKEntry() {
  const [hasSign, setHasSign] = useState(true)
  const [hasTime, setHasTime] = useState(true)
  const [targetDate, setTargetDate] = useState(Date.now() + 10 * 60 * 1000)
  const [timestamp, {minutes, seconds}] = useCountdown({targetDate})

  const getBtnText = useCallback(() => {
    if(hasSign) {
      if(hasTime) {
        return `${minutes}:${seconds}`
      } else {
        return 'Go'
      }
    } else {
      return '签到'
    }

  }, [hasSign, hasTime, seconds])

  const getInfoText = useCallback(() => {
    if(hasSign) {
      if(hasTime) {
        return (
          <div>
            <p>观看直播10分钟</p>
            <p>抽奖</p>
          </div>
        )
      } else {
        return  <div>
          <p>每日幸运</p>
          <p>抽奖</p>
        </div>
      }
    } else {
      return (
        <div>
          <p>每日签到</p>
          <p>免费抽奖</p>
        </div>
      )
    }

  }, [hasSign, hasTime])


  return (
    <div className="pk-entry">
      <p className="info">
        {getInfoText()}
      </p>

      <button className="btn">
        {getBtnText()}
      </button>
    </div>
  )
}

function HostEntry() {
  const [rank, setRank] = useState(3)

  return (
    <div className="host-entry">
      <div className="avatar">
        <img src={`//randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`} alt=""/>
      </div>
      <div className="info">
        <p>No.</p>
        <p className="rank">{rank > 50 ? '50+' : rank}</p>
      </div>
    </div>
  )
}

export default PK
